<script setup>
import * as echarts from 'echarts';
import {ref, onMounted, getCurrentInstance, reactive} from 'vue';
import router from "@/router";
import {post} from "@/net";

const echartsRef = ref(null);
const { proxy } = getCurrentInstance()
const statistics = reactive([])
const chartData = reactive([])

onMounted(() => {
    getStatistic()
});

const getStatistic = () => {
    post('api/statistics/gid',{
            gid: proxy.$route.query.gid
        }, (data) => {
            statistics.value = data
            // console.log(statistics.value)
            getGameSingers()
        }
    )
}

const getGameSingers = () => {
    let unfinishedRequests = statistics.value.length
    let chartDataReady = false

    for (let i = 0; i < statistics.value.length; i++) {
        post('/api/singer/sid', {
            sid: statistics.value[i].sid
        }, (data) => {
            statistics.value[i].singer_name = data.name
            unfinishedRequests--;// 每个请求完成后减少未完成的请求计数

            // 检查是否所有请求都已完成
            if (unfinishedRequests === 0 && !chartDataReady) {
                chartData.value = getChartData()
                // console.log(chartData.value)
                window.waitForEcharts = true
                showChart()
                chartDataReady = true // 防止showChart被多次调用
            }
        });
    }
};

const getChartData = () => {
    const singerName = []
    const voteScore = []
    const score = []
    let allCount = 0

    for (let i = 0; i < statistics.value.length; i++) {
        allCount += statistics.value[i].count
    }

    for (let i = 0; i < statistics.value.length; i++) {
        singerName.push(statistics.value[i].singer_name)
        let origin_vote_score = (statistics.value[i].count / allCount) * 100 * 0.3
        voteScore.push((origin_vote_score).toFixed(2))
        score.push((statistics.value[i].score - origin_vote_score).toFixed(2))
    }

    return {
        singerName,
        voteScore: voteScore.map(Number), // 将字符串转换回数字
        score: score.map(Number)
    }
}

const showChart = () => {
    const myChart = echarts.init(echartsRef.value);
    // 配置图表
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            max: 100
        },
        yAxis: {
            type: 'category',
            data: chartData.value.singerName
        },
        series: [
            {
                name: '投票得分(30%)',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: chartData.value.voteScore
            },
            {
                name: '裁判评分(70%)',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: chartData.value.score
            }
        ]
    });
}

</script>

<template>
    <div>
        <div>
            <el-button @click="router.push('/index/game')" type="warning">{{ '返回' }}</el-button>
        </div>
        <div class="chart" ref="echartsRef" style="width: 600px; height: 400px;"></div>
    </div>

</template>

<style scoped>
.chart {
    margin-left: 400px;
}
</style>